<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="../layui/css/layui.css">
</head>

<body>
<div class="layui-row">
    <div class="layui-col-md9">
        <div class="layui-card">
            <div class="layui-card-header">区域一览</div>
            <div class="layui-card-body">
                <table id="demo" lay-filter="test"></table>
            </div>
        </div>
    </div>
</div>
<div class="layui-row">
    <div class="layui-col-xs6">
        <div class="grid-demo grid-demo-bg1">
            <form action="addArea.html" method="post">
                <input type="submit" class="layui-btn" id="addBtn" value="添加区域">
            </form>

        </div>
    </div>
    <div class="layui-col-xs6">
        <div class="grid-demo">
            <div class="layui-form-item">
                <label class="layui-form-label">区域名称</label>
                <div class="layui-input-block">
                    <input id="qaName" type="text" name="f_pestName" required  lay-verify="required" placeholder="请输入区域名" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">林种</label>
                <div class="layui-input-block">
                    <input id="qaWood" type="text" name="f_host" required  lay-verify="required" placeholder="请输入林种" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">负责小班</label>
                <div class="layui-input-block">
                    <input id="qaClass" type="text" name="f_host" required  lay-verify="required" placeholder="请输入负责小班" autocomplete="off" class="layui-input">
                </div>
            </div>
            <button type="button" class="layui-btn" id="queryBtn">查询</button>
        </div>
    </div>
</div>

</body>
<script src="../layui/layui.all.js"></script>
<script>
    (function () {
        var table = layui.table;
        var $ =layui.$;
        //第一个实例
        t =table.render({
            elem: '#demo',
            height: 400,
            url: '/pestSystem/area.do' //数据接口
            ,
            page: true //开启分页
            ,
            request:{
                pageName:"pageNo",
                limitName:"pageSize"
            },
            //    SELECT
            //    t_area.pkid,
            //    t_area.f_areaName,
            //    t_area.f_forestType,
            //    t_area.f_landType,
            //    t_area.f_advantageTreeType
            //            FROM
            //    t_area
            cols: [
                [ //表头
                    {
                        field: 'pkid',
                        title: 'ID',
                        // width: 80,
                        // sort: true,
                        fixed: 'left'
                    }, {
                    field: 'f_areaName',
                    title: '区域名',
                    // width: 80,
                    // edit: true
                }, {
                    field: 'f_forestType',
                    title: '林种',
                    // width: 80,
                    // sort: true
                }, {
                    field: 'f_landType',
                    title: '地类',
                    // width: 80
                }, {
                    field: 'f_advantageTreeType',
                    title: '优势树种',
                    // width: 177
                    // templet:'<div>{{d.area.f_areaName}}</div>'
                }
                ,{
                    field:'f_className',
                    title:'负责班级',

                }
                ]
            ]
        });
        $("#queryBtn").on("click",function () {
            t.reload({
                where:{
                    f_areaName:$("#qaName").val(),
                    f_forestType:$("#qaWood").val(),
                    f_className:$("#qaClass").val()
                },
                page:{
                    curr:1
                }
            });
        });


    })();
</script>

</html>